<template>
	<view class="profile-container">
		<!-- 背景装饰 -->
		<view class="background-decoration"></view>
		
		<!-- 个人信息卡片 -->
		<view class="profile-card">
			<!-- 基本信息 -->
			<view class="profile-header">
				<view class="user-info">
					<text class="username">{{ userInfo.nickname || userInfo.username || '用户' }}</text>
					<text class="user-role">{{ getRoleText(userInfo.role) }}</text>
				</view>
			</view>
			
			<!-- 用户详细信息 -->
			<view class="info-section">
				<view class="section-title">
					<text class="title-icon">📋</text>
					<text class="title-text">个人信息</text>
				</view>
				
				<view class="info-list">
					<view class="info-item">
						<view class="info-label">
							<text class="label-icon">👤</text>
							<text class="label-text">用户名</text>
						</view>
						<text class="info-value">{{ userInfo.username || '未设置' }}</text>
					</view>
					
					<view class="info-item">
						<view class="info-label">
							<text class="label-icon">📧</text>
							<text class="label-text">邮箱</text>
						</view>
						<text class="info-value">{{ userInfo.email || '未设置' }}</text>
					</view>
					
					<view class="info-item">
						<view class="info-label">
							<text class="label-icon">🏷️</text>
							<text class="label-text">角色</text>
						</view>
						<text class="info-value role-badge" :class="userInfo.role">
							{{ getRoleText(userInfo.role) }}
						</text>
					</view>
					
					<view class="info-item">
						<view class="info-label">
							<text class="label-icon">📅</text>
							<text class="label-text">注册时间</text>
						</view>
						<text class="info-value">{{ formatDate(userInfo.register_date) }}</text>
					</view>
					
					<view class="info-item">
						<view class="info-label">
							<text class="label-icon">🕐</text>
							<text class="label-text">最后登录</text>
						</view>
						<text class="info-value">{{ formatDate(userInfo.last_login_date) }}</text>
					</view>
				</view>
			</view>
			
			<!-- 管理员功能区 -->
			<view class="admin-section" v-if="isAdmin">
				<view class="section-title">
					<text class="title-icon">🔑</text>
					<text class="title-text">管理员功能</text>
				</view>
				
				<view class="admin-buttons">
					<button class="admin-btn data-manage-btn" @click="goToDataManage">
						<view class="btn-content">
							<image class="btn-icon" src="/static/tabbar/database.png" mode="aspectFit"></image>
							<text class="btn-text">数据管理</text>
						</view>
					</button>
					<button class="admin-btn user-manage-btn" @click="goToUserManage">
						<view class="btn-content">
							<image class="btn-icon" src="/static/tabbar/user.png" mode="aspectFit"></image>
							<text class="btn-text">用户管理</text>
						</view>
					</button>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-section">
				<!-- 编辑资料功能已隐藏 -->
				<!-- <button class="action-btn edit-btn" @click="editProfile">
					<text class="btn-icon">✏️</text>
					<text class="btn-text">编辑资料</text>
				</button> -->
				
				<button class="action-btn logout-btn" @click="showLogoutConfirm">
					<text class="btn-icon">🚪</text>
					<text class="btn-text">退出登录</text>
				</button>
			</view>
		</view>
		
		<!-- 退出登录确认弹窗 -->
		<view v-if="showLogoutModal" class="modal-overlay" @click="hideLogoutConfirm">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">确认退出</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">确定要退出登录吗？</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @click="hideLogoutConfirm">取消</button>
					<button class="modal-btn confirm-btn" @click="logout">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			showLogoutModal: false
		}
	},
	computed: {
		// 判断是否为管理员
		isAdmin() {
			const userInfo = uni.getStorageSync('userInfo');
			return userInfo && userInfo.role === 'admin';
		}
	},
	onLoad() {
		this.loadUserInfo()
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = userInfo
			} else {
				// 如果没有用户信息，跳转到登录页
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},
		
		// 获取角色文本
		getRoleText(role) {
			switch (role) {
				case 'admin':
					return '管理员'
				case 'user':
					return '普通用户'
				default:
					return '未知角色'
			}
		},
		
		// 格式化日期
		formatDate(timestamp) {
			if (!timestamp) return '未知'
			const date = new Date(timestamp)
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},
		
		// 编辑资料
		editProfile() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none',
				duration: 2000
			})
		},
		
		// 显示退出登录确认弹窗
		showLogoutConfirm() {
			this.showLogoutModal = true
		},
		
		// 隐藏退出登录确认弹窗
		hideLogoutConfirm() {
			this.showLogoutModal = false
		},
		
		// 退出登录
		logout() {
			// 清除本地存储的用户信息
			uni.removeStorageSync('token')
			uni.removeStorageSync('userInfo')
			
			// 显示退出成功提示
			uni.showToast({
				title: '退出成功',
				icon: 'success',
				duration: 1500
			})
			
			// 延迟跳转到登录页
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}, 1500)
		},
		
		// 跳转到数据管理页面
		goToDataManage() {
			uni.navigateTo({
				url: '/pages/DataManage/DataManage'
			})
		},
		
		// 跳转到用户管理页面
		goToUserManage() {
			uni.navigateTo({
				url: '/pages/userManage/userManage'
			})
		}
	}
}
</script>

<style>
.profile-container {
	min-height: 100vh;
	background: #DAC3A9;
	padding: 40rpx 32rpx;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 80%, rgba(218, 195, 169, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(218, 195, 169, 0.2) 0%, transparent 50%);
	pointer-events: none;
}

.profile-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	padding: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20rpx);
	position: relative;
	z-index: 1;
}

/* 个人信息头部 */
.profile-header {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
	padding-bottom: 32rpx;
	border-bottom: 2rpx solid rgba(218, 195, 169, 0.3);
	justify-content: center;
	text-align: center;
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	align-items: center;
}

.username {
	font-size: 36rpx;
	font-weight: 600;
	color: #1e293b;
}

.user-role {
	font-size: 28rpx;
	color: #64748b;
	font-weight: 500;
}

/* 信息区域 */
.info-section {
	margin-bottom: 40rpx;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	gap: 12rpx;
}

.title-icon {
	font-size: 32rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #1e293b;
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
	border-radius: 16rpx;
	border: 1px solid rgba(226, 232, 240, 0.6);
}

.info-label {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.label-icon {
	font-size: 24rpx;
}

.label-text {
	font-size: 28rpx;
	color: #64748b;
	font-weight: 500;
}

.info-value {
	font-size: 28rpx;
	color: #1e293b;
	font-weight: 500;
	max-width: 300rpx;
	text-align: right;
	word-break: break-all;
}

.role-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	color: white;
}

.role-badge.admin {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.role-badge.user {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* 管理员功能区 */
.admin-section {
	margin-bottom: 32rpx;
	padding-top: 32rpx;
	border-top: 2rpx solid rgba(102, 126, 234, 0.1);
}

.admin-buttons {
	display: flex;
	gap: 16rpx;
	margin-top: 16rpx;
}

.admin-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 16rpx;
	border: none;
	background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
	color: white;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 8rpx 24rpx rgba(245, 158, 11, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.admin-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 12rpx rgba(245, 158, 11, 0.4);
}

.admin-btn .btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.admin-btn .btn-icon {
	width: 32rpx;
	height: 32rpx;
}

.admin-btn .btn-text {
	font-size: 26rpx;
	font-weight: 600;
}

/* 操作按钮 */
.action-section {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.action-btn {
	height: 88rpx;
	border-radius: 20rpx;
	border: none;
	font-size: 32rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.edit-btn {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.3);
}

.logout-btn {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: white;
	box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.3);
}

.action-btn:hover {
	transform: translateY(-2rpx);
}

.action-btn:active {
	transform: translateY(1rpx);
}

.btn-icon {
	font-size: 28rpx;
}

.btn-text {
	font-size: 32rpx;
	font-weight: 600;
}

/* 模态框 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border-radius: 20rpx;
	width: 560rpx;
	max-width: 90vw;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
	padding: 32rpx 32rpx 16rpx 32rpx;
	border-bottom: 2rpx solid #f1f5f9;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1e293b;
	text-align: center;
}

.modal-body {
	padding: 24rpx 32rpx;
}

.modal-text {
	font-size: 28rpx;
	color: #64748b;
	text-align: center;
	line-height: 1.5;
}

.modal-footer {
	display: flex;
	gap: 16rpx;
	padding: 16rpx 32rpx 32rpx 32rpx;
}

.modal-btn {
	flex: 1;
	height: 72rpx;
	border-radius: 16rpx;
	border: none;
	font-size: 28rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
}

.confirm-btn {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: white;
	box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.3);
}

.modal-btn:hover {
	transform: translateY(-1rpx);
}

.modal-btn:active {
	transform: translateY(1rpx);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.profile-container {
		padding: 32rpx 24rpx;
	}
	
	.profile-card {
		padding: 32rpx 24rpx;
	}
	
	.avatar-container {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}
	
	.username {
		font-size: 32rpx;
	}
	
	.info-value {
		max-width: 240rpx;
		font-size: 26rpx;
	}
}
</style>